import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Description } = DescriptionList;
export default
@connect(({ active, loading }) => ({
  active,
  loading: loading.effects['active/detail'],
}))
class ActiveDetail extends Component {
  componentDidMount() {
    const articleID=this.props.match.params.id;
    const { dispatch } = this.props;
    dispatch({
      type: 'active/detail',
      payload:articleID
    });
  }

  render() {
    const { active:{detail}, loading } = this.props;
    console.log(detail)
    function createMarkup(str) { return {__html: str}; };
    return (
      <PageHeaderWrapper title="活动详情">
        <Card bordered={false}>
          <DescriptionList col="2" size="large" title="活动标题" style={{ marginBottom: 32 }}>
            <Description>{detail.title}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动type" style={{ marginBottom: 32 }}>
            <Description>{detail.type}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="主讲人" style={{ marginBottom: 32 }}>
            <Description>{detail.speaker}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="作者" style={{ marginBottom: 32 }}>
            <Description>{detail.author}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动类别" style={{ marginBottom: 32 }}>
            <Description>{detail.categorys&&detail.categorys[0]}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动开始时间" style={{ marginBottom: 32 }}>
            <Description>{detail.activityStartTime}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动结束时间" style={{ marginBottom: 32 }}>
            <Description>{detail.activityEndTime}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动下线时间" style={{ marginBottom: 32 }}>
            <Description>{detail.activityDownTime}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动标签" style={{ marginBottom: 32 }}>
            <Description>{detail.tags}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="地点" style={{ marginBottom: 32 }}>
            <Description>{detail.address}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="活动摘要" style={{ marginBottom: 32 }}>
            <Description>{detail.summary}</Description>
          </DescriptionList>
          <DescriptionList col="2" size="large" title="封面图" style={{ marginBottom: 32 }}>
            <Description><img src={detail.coverPic} alt=""/></Description>
          </DescriptionList>
          <DescriptionList size="large" title="活动详情" style={{ marginBottom: 32 }}>
            <div dangerouslySetInnerHTML={createMarkup(detail.body)}>
            </div>
          </DescriptionList>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
